<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue3 项目创建 | 海内存知已，天涯若比邻</title><meta name="keywords" content="前端,Vue"><meta name="author" content="mowei"><meta name="copyright" content="mowei"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="1.项目初始化环境准备  node v16.14.2 pnpm 8.0.0  pnpm安装指令 npm i -g pnpm 项目初始化命令: pnpm create vue 2.项目配置2.1 eslint配置1.1 安装eslint12345678910# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查&quot;eslint-config">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue3 项目创建">
<meta property="og:url" content="https://gitee.com/momomomowei/blog/web/0%20vue3%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%E6%89%8B%E5%86%8C/index.html">
<meta property="og:site_name" content="海内存知已，天涯若比邻">
<meta property="og:description" content="1.项目初始化环境准备  node v16.14.2 pnpm 8.0.0  pnpm安装指令 npm i -g pnpm 项目初始化命令: pnpm create vue 2.项目配置2.1 eslint配置1.1 安装eslint12345678910# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查&quot;eslint-config">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/momomomowei/images/vue.png">
<meta property="article:published_time" content="2024-04-21T05:32:06.000Z">
<meta property="article:modified_time" content="2024-04-21T07:24:14.421Z">
<meta property="article:author" content="mowei">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/momomomowei/images/vue.png"><link rel="shortcut icon" href="/media/favicon.png"><link rel="canonical" href="https://gitee.com/momomomowei/blog/web/0%20vue3%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%E6%89%8B%E5%86%8C/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue3 项目创建',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-04-21 15:24:14'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    document.addEventListener('pjax:complete', detectApple)})(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/media/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">29</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/images/vue.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">海内存知已，天涯若比邻</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue3 项目创建</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-04-21T05:32:06.000Z" title="发表于 2024-04-21 13:32:06">2024-04-21</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-04-21T07:24:14.421Z" title="更新于 2024-04-21 15:24:14">2024-04-21</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>26分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue3 项目创建"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="1-项目初始化"><a href="#1-项目初始化" class="headerlink" title="1.项目初始化"></a>1.项目初始化</h1><p>环境准备</p>
<ul>
<li>node v16.14.2</li>
<li>pnpm 8.0.0</li>
</ul>
<p>pnpm安装指令</p>
<pre><code>npm i -g pnpm
</code></pre><p>项目初始化命令:</p>
<pre><code>pnpm create vue
</code></pre><h1 id="2-项目配置"><a href="#2-项目配置" class="headerlink" title="2.项目配置"></a>2.项目配置</h1><h2 id="2-1-eslint配置"><a href="#2-1-eslint配置" class="headerlink" title="2.1 eslint配置"></a>2.1 eslint配置</h2><h3 id="1-1-安装eslint"><a href="#1-1-安装eslint" class="headerlink" title="1.1 安装eslint"></a>1.1 安装eslint</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"># 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查</span><br><span class="line"><span class="attr">&quot;eslint-config-prettier&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^8.6.0&quot;</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;eslint-plugin-import&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.27.5&quot;</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;eslint-plugin-node&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^11.1.0&quot;</span><span class="punctuation">,</span></span><br><span class="line"># 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低</span><br><span class="line"><span class="attr">&quot;eslint-plugin-prettier&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^4.2.1&quot;</span><span class="punctuation">,</span></span><br><span class="line"># vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南</span><br><span class="line"><span class="attr">&quot;eslint-plugin-vue&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^9.9.0&quot;</span><span class="punctuation">,</span></span><br><span class="line"># 该解析器允许使用Eslint校验所有babel code</span><br><span class="line"><span class="attr">&quot;@babel/eslint-parser&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^7.19.1&quot;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pnpm i eslint eslint<span class="literal">-plugin-import</span> eslint<span class="literal">-plugin-vue</span> eslint<span class="literal">-plugin-node</span> eslint<span class="literal">-plugin-prettier</span> eslint<span class="literal">-config-prettier</span> eslint<span class="literal">-plugin-node</span> @babel/eslint<span class="literal">-parser</span> <span class="literal">-D</span></span><br></pre></td></tr></table></figure>
<h3 id="1-2-生成配置文件-eslint-cjs"><a href="#1-2-生成配置文件-eslint-cjs" class="headerlink" title="1.2 生成配置文件:.eslint.cjs"></a>1.2 生成配置文件:.eslint.cjs</h3><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx eslint <span class="literal">--init</span></span><br></pre></td></tr></table></figure>
<h3 id="1-3-替换配置文件"><a href="#1-3-替换配置文件" class="headerlink" title="1.3 替换配置文件"></a>1.3 替换配置文件</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// @see https://eslint.bootcss.com/docs/rules/</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">root</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">env</span>: &#123;</span><br><span class="line">    <span class="attr">browser</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">es2021</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">node</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">jest</span>: <span class="literal">true</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">/* 指定如何解析语法 */</span></span><br><span class="line">  <span class="attr">parser</span>: <span class="string">&#x27;vue-eslint-parser&#x27;</span>,</span><br><span class="line">  <span class="comment">/** 优先级低于 parse 的语法解析配置 */</span></span><br><span class="line">  <span class="attr">parserOptions</span>: &#123;</span><br><span class="line">    <span class="attr">ecmaVersion</span>: <span class="string">&#x27;latest&#x27;</span>,</span><br><span class="line">    <span class="attr">sourceType</span>: <span class="string">&#x27;module&#x27;</span>,</span><br><span class="line">    <span class="attr">parser</span>: <span class="string">&#x27;@typescript-eslint/parser&#x27;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">/* 继承已有的规则 */</span></span><br><span class="line">  <span class="attr">extends</span>: [</span><br><span class="line">    <span class="string">&#x27;eslint:recommended&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;plugin:vue/vue3-essential&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;plugin:@typescript-eslint/recommended&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;plugin:prettier/recommended&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;@vue/eslint-config-typescript&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;@vue/eslint-config-prettier/skip-formatting&#x27;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">plugins</span>: [<span class="string">&#x27;vue&#x27;</span>, <span class="string">&#x27;@typescript-eslint&#x27;</span>],</span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">   * &quot;off&quot; 或 0    ==&gt;  关闭规则</span></span><br><span class="line"><span class="comment">   * &quot;warn&quot; 或 1   ==&gt;  打开的规则作为警告（不影响代码执行）</span></span><br><span class="line"><span class="comment">   * &quot;error&quot; 或 2  ==&gt;  规则作为一个错误（代码不能执行，界面报错）</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="attr">rules</span>: &#123;</span><br><span class="line">    <span class="comment">// eslint（https://eslint.bootcss.com/docs/rules/）</span></span><br><span class="line">    <span class="string">&#x27;no-var&#x27;</span>: <span class="string">&#x27;error&#x27;</span>, <span class="comment">// 要求使用 let 或 const 而不是 var</span></span><br><span class="line">    <span class="string">&#x27;no-multiple-empty-lines&#x27;</span>: [<span class="string">&#x27;warn&#x27;</span>, &#123; <span class="attr">max</span>: <span class="number">3</span> &#125;], <span class="comment">// 不允许多个空行</span></span><br><span class="line">    <span class="string">&#x27;no-console&#x27;</span>: process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&#x27;production&#x27;</span> ? <span class="string">&#x27;error&#x27;</span> : <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;no-debugger&#x27;</span>: process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&#x27;production&#x27;</span> ? <span class="string">&#x27;error&#x27;</span> : <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;no-unexpected-multiline&#x27;</span>: <span class="string">&#x27;error&#x27;</span>, <span class="comment">// 禁止空余的多行</span></span><br><span class="line">    <span class="string">&#x27;no-useless-escape&#x27;</span>: <span class="string">&#x27;off&#x27;</span>, <span class="comment">// 禁止不必要的转义字符</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// typeScript (https://typescript-eslint.io/rules)</span></span><br><span class="line">    <span class="string">&#x27;@typescript-eslint/no-unused-vars&#x27;</span>: <span class="string">&#x27;error&#x27;</span>, <span class="comment">// 禁止定义未使用的变量</span></span><br><span class="line">    <span class="string">&#x27;@typescript-eslint/prefer-ts-expect-error&#x27;</span>: <span class="string">&#x27;error&#x27;</span>, <span class="comment">// 禁止使用 @ts-ignore</span></span><br><span class="line">    <span class="string">&#x27;@typescript-eslint/no-explicit-any&#x27;</span>: <span class="string">&#x27;off&#x27;</span>, <span class="comment">// 禁止使用 any 类型</span></span><br><span class="line">    <span class="string">&#x27;@typescript-eslint/no-non-null-assertion&#x27;</span>: <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;@typescript-eslint/no-namespace&#x27;</span>: <span class="string">&#x27;off&#x27;</span>, <span class="comment">// 禁止使用自定义 TypeScript 模块和命名空间。</span></span><br><span class="line">    <span class="string">&#x27;@typescript-eslint/semi&#x27;</span>: <span class="string">&#x27;off&#x27;</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// eslint-plugin-vue (https://eslint.vuejs.org/rules/)</span></span><br><span class="line">    <span class="string">&#x27;vue/multi-word-component-names&#x27;</span>: <span class="string">&#x27;off&#x27;</span>, <span class="comment">// 要求组件名称始终为 “-” 链接的单词</span></span><br><span class="line">    <span class="string">&#x27;vue/script-setup-uses-vars&#x27;</span>: <span class="string">&#x27;error&#x27;</span>, <span class="comment">// 防止&lt;script setup&gt;使用的变量&lt;template&gt;被标记为未使用</span></span><br><span class="line">    <span class="string">&#x27;vue/no-mutating-props&#x27;</span>: <span class="string">&#x27;off&#x27;</span>, <span class="comment">// 不允许组件 prop的改变</span></span><br><span class="line">    <span class="string">&#x27;vue/attribute-hyphenation&#x27;</span>: <span class="string">&#x27;off&#x27;</span>, <span class="comment">// 对模板中的自定义组件强制执行属性命名样式</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="1-4-eslintignore忽略文件"><a href="#1-4-eslintignore忽略文件" class="headerlink" title="1.4 eslintignore忽略文件"></a>1.4 eslintignore忽略文件</h3><pre><code>dist
node_modules
</code></pre><h3 id="1-5-新增运行脚本"><a href="#1-5-新增运行脚本" class="headerlink" title="1.5 新增运行脚本"></a>1.5 新增运行脚本</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;lint&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint src&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;fix&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint src --fix&quot;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-2-配置prettier"><a href="#2-2-配置prettier" class="headerlink" title="2.2 配置prettier"></a>2.2 配置prettier</h2><blockquote>
<p>eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观</p>
</blockquote>
<h3 id="1-1安装依赖包"><a href="#1-1安装依赖包" class="headerlink" title="1.1安装依赖包"></a>1.1安装依赖包</h3><pre><code>pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
</code></pre><h3 id="1-2-prettierrc-json添加规则"><a href="#1-2-prettierrc-json添加规则" class="headerlink" title="1.2.prettierrc.json添加规则"></a>1.2.prettierrc.json添加规则</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;singleQuote&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;semi&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;bracketSpacing&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;htmlWhitespaceSensitivity&quot;</span><span class="punctuation">:</span> <span class="string">&quot;ignore&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;endOfLine&quot;</span><span class="punctuation">:</span> <span class="string">&quot;auto&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;trailingComma&quot;</span><span class="punctuation">:</span> <span class="string">&quot;all&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tabWidth&quot;</span><span class="punctuation">:</span> <span class="number">4</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;printWidth&quot;</span><span class="punctuation">:</span> <span class="number">120</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="1-3-prettierignore忽略文件"><a href="#1-3-prettierignore忽略文件" class="headerlink" title="1.3.prettierignore忽略文件"></a>1.3.prettierignore忽略文件</h3><pre><code>/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
</code></pre><p><strong>通过pnpm run lint去检测语法，如果出现不规范格式,通过pnpm run fix 修改</strong></p>
<h2 id="2-3-配置stylelint"><a href="#2-3-配置stylelint" class="headerlink" title="2.3 配置stylelint"></a>2.3 配置stylelint</h2><blockquote>
<p><a target="_blank" rel="noopener" href="https://stylelint.io/">stylelint</a>为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等,使用scss作为预处理器</p>
</blockquote>
<h3 id="1-1-安装依赖"><a href="#1-1-安装依赖" class="headerlink" title="1.1 安装依赖"></a>1.1 安装依赖</h3><pre><code>pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
</code></pre><h3 id="1-2-stylelintrc-cjs配置文件"><a href="#1-2-stylelintrc-cjs配置文件" class="headerlink" title="1.2 .stylelintrc.cjs配置文件"></a>1.2 .stylelintrc.cjs配置文件</h3><p><strong>官网:<a target="_blank" rel="noopener" href="https://stylelint.bootcss.com/">https://stylelint.bootcss.com/</a></strong></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// @see https://stylelint.bootcss.com/</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">extends</span>: [</span><br><span class="line">    <span class="string">&#x27;stylelint-config-standard&#x27;</span>, <span class="comment">// 配置stylelint拓展插件</span></span><br><span class="line">    <span class="string">&#x27;stylelint-config-html/vue&#x27;</span>, <span class="comment">// 配置 vue 中 template 样式格式化</span></span><br><span class="line">    <span class="string">&#x27;stylelint-config-standard-scss&#x27;</span>, <span class="comment">// 配置stylelint scss插件</span></span><br><span class="line">    <span class="string">&#x27;stylelint-config-recommended-vue/scss&#x27;</span>, <span class="comment">// 配置 vue 中 scss 样式格式化</span></span><br><span class="line">    <span class="string">&#x27;stylelint-config-recess-order&#x27;</span>, <span class="comment">// 配置stylelint css属性书写顺序插件,</span></span><br><span class="line">    <span class="string">&#x27;stylelint-config-prettier&#x27;</span>, <span class="comment">// 配置stylelint和prettier兼容</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">overrides</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">files</span>: [<span class="string">&#x27;**/*.(scss|css|vue|html)&#x27;</span>],</span><br><span class="line">      <span class="attr">customSyntax</span>: <span class="string">&#x27;postcss-scss&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">files</span>: [<span class="string">&#x27;**/*.(html|vue)&#x27;</span>],</span><br><span class="line">      <span class="attr">customSyntax</span>: <span class="string">&#x27;postcss-html&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">ignoreFiles</span>: [</span><br><span class="line">    <span class="string">&#x27;**/*.js&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;**/*.jsx&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;**/*.tsx&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;**/*.ts&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;**/*.json&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;**/*.md&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;**/*.yaml&#x27;</span>,</span><br><span class="line">  ],</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * null  =&gt; 关闭该规则</span></span><br><span class="line"><span class="comment">   * always =&gt; 必须</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  <span class="attr">rules</span>: &#123;</span><br><span class="line">    <span class="string">&#x27;value-keyword-case&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 在 css 中使用 v-bind，不报错</span></span><br><span class="line">    <span class="string">&#x27;no-descending-specificity&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器</span></span><br><span class="line">    <span class="string">&#x27;function-url-quotes&#x27;</span>: <span class="string">&#x27;always&#x27;</span>, <span class="comment">// 要求或禁止 URL 的引号 &quot;always(必须加上引号)&quot;|&quot;never(没有引号)&quot;</span></span><br><span class="line">    <span class="string">&#x27;no-empty-source&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 关闭禁止空源码</span></span><br><span class="line">    <span class="string">&#x27;selector-class-pattern&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 关闭强制选择器类名的格式</span></span><br><span class="line">    <span class="string">&#x27;property-no-unknown&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 禁止未知的属性(true 为不允许)</span></span><br><span class="line">    <span class="string">&#x27;block-opening-brace-space-before&#x27;</span>: <span class="string">&#x27;always&#x27;</span>, <span class="comment">//大括号之前必须有一个空格或不能有空白符</span></span><br><span class="line">    <span class="string">&#x27;value-no-vendor-prefix&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 关闭 属性值前缀 --webkit-box</span></span><br><span class="line">    <span class="string">&#x27;property-no-vendor-prefix&#x27;</span>: <span class="literal">null</span>, <span class="comment">// 关闭 属性前缀 -webkit-mask</span></span><br><span class="line">    <span class="string">&#x27;selector-pseudo-class-no-unknown&#x27;</span>: [</span><br><span class="line">      <span class="comment">// 不允许未知的选择器</span></span><br><span class="line">      <span class="literal">true</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">ignorePseudoClasses</span>: [<span class="string">&#x27;global&#x27;</span>, <span class="string">&#x27;v-deep&#x27;</span>, <span class="string">&#x27;deep&#x27;</span>], <span class="comment">// 忽略属性，修改element默认样式的时候能使用到</span></span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="1-3-stylelintignore忽略文件"><a href="#1-3-stylelintignore忽略文件" class="headerlink" title="1.3 .stylelintignore忽略文件"></a>1.3 .stylelintignore忽略文件</h3><pre><code>/node_modules/*
/dist/*
/html/*
/public/*
</code></pre><h3 id="1-4-添加运行脚本"><a href="#1-4-添加运行脚本" class="headerlink" title="1.4 添加运行脚本"></a>1.4 添加运行脚本</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">	<span class="attr">&quot;lint:style&quot;</span><span class="punctuation">:</span> <span class="string">&quot;stylelint src/**/*.&#123;css,scss,vue&#125; --cache --fix&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<p>最后配置统一的prettier来格式化我们的js和css，html代码</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">   <span class="attr">&quot;dev&quot;</span><span class="punctuation">:</span> <span class="string">&quot;vite --open&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;build&quot;</span><span class="punctuation">:</span> <span class="string">&quot;vue-tsc &amp;&amp; vite build&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;preview&quot;</span><span class="punctuation">:</span> <span class="string">&quot;vite preview&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;lint&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint src&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;fix&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint src --fix&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;format&quot;</span><span class="punctuation">:</span> <span class="string">&quot;prettier --write \&quot;./**/*.&#123;html,vue,ts,js,json,md&#125;\&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;lint:eslint&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint src/**/*.&#123;ts,vue&#125; --cache --fix&quot;</span><span class="punctuation">,</span></span><br><span class="line">   <span class="attr">&quot;lint:style&quot;</span><span class="punctuation">:</span> <span class="string">&quot;stylelint src/**/*.&#123;css,scss,vue&#125; --cache --fix&quot;</span></span><br><span class="line"> <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>
<p><strong>当我们运行<code>pnpm run format</code>的时候，会把代码直接格式化</strong></p>
<h2 id="2-4-配置husky"><a href="#2-4-配置husky" class="headerlink" title="2.4 配置husky"></a>2.4 配置husky</h2><blockquote>
<p>在上面我们已经集成好了我们代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)，然后执行<code>pnpm run format</code>来自动的格式化我们的代码。</p>
</blockquote>
<h3 id="1-1-创建git仓库"><a href="#1-1-创建git仓库" class="headerlink" title="1.1 创建git仓库"></a>1.1 创建git仓库</h3><pre><code>git init
</code></pre><h3 id="1-2-安装husky"><a href="#1-2-安装husky" class="headerlink" title="1.2 安装husky"></a>1.2 安装<code>husky</code></h3><pre><code>pnpm install -D husky
</code></pre><h3 id="1-3-生成配置"><a href="#1-3-生成配置" class="headerlink" title="1.3 生成配置"></a>1.3 生成配置</h3><pre><code>npx husky-init
</code></pre><p>会在根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行</p>
<p>在<code>.husky/pre-commit</code>文件添加如下命令：</p>
<pre><code>#!/usr/bin/env sh
. &quot;$(dirname -- &quot;$0&quot;)/_/husky.sh&quot;
pnpm run format
</code></pre><p>当我们对代码进行commit操作的时候，就会执行命令，对代码进行格式化，然后再提交。</p>
<h2 id="2-5-配置commitlint"><a href="#2-5-配置commitlint" class="headerlink" title="2.5 配置commitlint"></a>2.5 配置commitlint</h2><blockquote>
<p>对于我们的commit信息，也是有统一规范的，不能随便写,要让每个人都按照统一的标准来执行，我们可以利用<strong>commitlint</strong>来实现</p>
</blockquote>
<h3 id="1-1-安装"><a href="#1-1-安装" class="headerlink" title="1.1 安装"></a>1.1 安装</h3><pre><code>pnpm add @commitlint/config-conventional @commitlint/cli -D
</code></pre><h3 id="1-2-配置"><a href="#1-2-配置" class="headerlink" title="1.2 配置"></a>1.2 配置</h3><p>添加配置文件，新建 commitlint.config.cjs (注意是cjs)，然后添加下面的代码：</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">extends</span>: [<span class="string">&#x27;@commitlint/config-conventional&#x27;</span>],</span><br><span class="line">  <span class="comment">// 校验规则</span></span><br><span class="line">  <span class="attr">rules</span>: &#123;</span><br><span class="line">    <span class="string">&#x27;type-enum&#x27;</span>: [</span><br><span class="line">      <span class="number">2</span>,</span><br><span class="line">      <span class="string">&#x27;always&#x27;</span>,</span><br><span class="line">      [</span><br><span class="line">        <span class="string">&#x27;feat&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;fix&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;docs&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;style&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;refactor&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;perf&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;test&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;chore&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;revert&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;build&#x27;</span>,</span><br><span class="line">      ],</span><br><span class="line">    ],</span><br><span class="line">    <span class="string">&#x27;type-case&#x27;</span>: [<span class="number">0</span>],</span><br><span class="line">    <span class="string">&#x27;type-empty&#x27;</span>: [<span class="number">0</span>],</span><br><span class="line">    <span class="string">&#x27;scope-empty&#x27;</span>: [<span class="number">0</span>],</span><br><span class="line">    <span class="string">&#x27;scope-case&#x27;</span>: [<span class="number">0</span>],</span><br><span class="line">    <span class="string">&#x27;subject-full-stop&#x27;</span>: [<span class="number">0</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line">    <span class="string">&#x27;subject-case&#x27;</span>: [<span class="number">0</span>, <span class="string">&#x27;never&#x27;</span>],</span><br><span class="line">    <span class="string">&#x27;header-max-length&#x27;</span>: [<span class="number">0</span>, <span class="string">&#x27;always&#x27;</span>, <span class="number">72</span>],</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="1-3-添加scripts"><a href="#1-3-添加scripts" class="headerlink" title="1.3 添加scripts"></a>1.3 添加scripts</h3><pre><code># 在scrips中添加下面的代码
&#123;
&quot;scripts&quot;: &#123;
    &quot;commitlint&quot;: &quot;commitlint --config commitlint.config.cjs -e -V&quot;
  &#125;,
&#125;
</code></pre><blockquote>
<p>配置结束，现在当我们填写<code>commit</code>信息的时候，前面就需要带着下面的<code>subject</code></p>
</blockquote>
<pre><code>&#39;feat&#39;,//新特性、新功能
&#39;fix&#39;,//修改bug
&#39;docs&#39;,//文档修改
&#39;style&#39;,//代码格式修改, 注意不是 css 修改
&#39;refactor&#39;,//代码重构
&#39;perf&#39;,//优化相关，比如提升性能、体验
&#39;test&#39;,//测试用例修改
&#39;chore&#39;,//其他修改, 比如改变构建流程、或者增加依赖库、工具等
&#39;revert&#39;,//回滚到上一个版本
&#39;build&#39;,//编译相关的修改，例如发布版本、对项目构建或者依赖的改动
</code></pre><h3 id="1-4-配置husky"><a href="#1-4-配置husky" class="headerlink" title="1.4 配置husky"></a>1.4 配置husky</h3><pre><code>npx husky add .husky/commit-msg 
</code></pre><p>在生成的commit-msg文件中添加下面的命令</p>
<pre><code>#!/usr/bin/env sh
. &quot;$(dirname -- &quot;$0&quot;)/_/husky.sh&quot;
pnpm commitlint
</code></pre><p>当我们 commit 提交信息时，就不能再随意写了，必须是 git commit -m ‘fix: xxx’ 符合类型的才可以，<strong>需要注意的是类型的后面需要用英文的 :，并且冒号后面是需要空一格的，这个是不能省略的</strong></p>
<h2 id="2-6-强制使用pnpm"><a href="#2-6-强制使用pnpm" class="headerlink" title="2.6 强制使用pnpm"></a>2.6 强制使用pnpm</h2><blockquote>
<p>团队开发项目的时候，需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,</p>
<p>导致项目出现bug问题,因此包管理器工具需要统一管理！！！</p>
</blockquote>
<p>在根目录创建   scripts/preinstall.js  文件，添加下面的内容</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (!<span class="regexp">/pnpm/</span>.<span class="title function_">test</span>(process.<span class="property">env</span>.<span class="property">npm_execpath</span> || <span class="string">&#x27;&#x27;</span>)) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">warn</span>(</span><br><span class="line">    <span class="string">`\u001b[33mThis repository must using pnpm as the package manager `</span> +</span><br><span class="line">    <span class="string">` for scripts to work properly.\u001b[39m\n`</span>,</span><br><span class="line">  )</span><br><span class="line">  process.<span class="title function_">exit</span>(<span class="number">1</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>配置命令</p>
<pre><code>&quot;scripts&quot;: &#123;
    &quot;preinstall&quot;: &quot;node ./scripts/preinstall.js&quot;
&#125;
</code></pre><p><strong>当我们使用npm或者yarn来安装包的时候，就会报错了。原理就是在install的时候会触发preinstall（npm提供的生命周期钩子）这个文件里面的代码。</strong></p>
<h1 id="3-项目集成"><a href="#3-项目集成" class="headerlink" title="3.项目集成"></a>3.项目集成</h1><h2 id="3-0-配置文件示例"><a href="#3-0-配置文件示例" class="headerlink" title="3.0 配置文件示例"></a>3.0 配置文件示例</h2><p>src/vite-env.d.ts</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/// &lt;reference types=&quot;vite/client&quot; /&gt;</span></span><br><span class="line"><span class="comment">//解决ts文件引入vue文件出现红色警告问题</span></span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&#x27;*.vue&#x27;</span> &#123;</span><br><span class="line">  <span class="keyword">import</span> &#123; defineComponent &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line">  <span class="keyword">const</span> <span class="title class_">Component</span>: <span class="title class_">ReturnType</span>&lt;<span class="keyword">typeof</span> defineComponent&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Component</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>tsconfig.json示例</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;compilerOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;target&quot;</span><span class="punctuation">:</span> <span class="string">&quot;ESNext&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;useDefineForClassFields&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;module&quot;</span><span class="punctuation">:</span> <span class="string">&quot;ESNext&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;moduleResolution&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Node&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;strict&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;jsx&quot;</span><span class="punctuation">:</span> <span class="string">&quot;preserve&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;resolveJsonModule&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;isolatedModules&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;esModuleInterop&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;lib&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;ESNext&quot;</span><span class="punctuation">,</span> <span class="string">&quot;DOM&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;skipLibCheck&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;noEmit&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;baseUrl&quot;</span><span class="punctuation">:</span> <span class="string">&quot;./&quot;</span><span class="punctuation">,</span> <span class="comment">// 解析非相对模块的基地址，默认是当前目录</span></span><br><span class="line">    <span class="attr">&quot;paths&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="comment">//路径映射，相对于baseUrl</span></span><br><span class="line">      <span class="attr">&quot;@/*&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;src/*&quot;</span><span class="punctuation">]</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;include&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;src/**/*.ts&quot;</span><span class="punctuation">,</span> <span class="string">&quot;src/**/*.d.ts&quot;</span><span class="punctuation">,</span> <span class="string">&quot;src/**/*.tsx&quot;</span><span class="punctuation">,</span> <span class="string">&quot;src/**/*.vue&quot;</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;references&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;path&quot;</span><span class="punctuation">:</span> <span class="string">&quot;./tsconfig.node.json&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;path&quot;</span><span class="punctuation">:</span> <span class="string">&quot;./tsconfig.app.json&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<p>vite.config.ts示例</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line">import <span class="punctuation">&#123;</span> defineConfig<span class="punctuation">,</span> loadEnv <span class="punctuation">&#125;</span> from &#x27;vite&#x27;</span><br><span class="line">import vue from &#x27;@vitejs/plugin-vue&#x27;</span><br><span class="line">import path from &#x27;path&#x27;</span><br><span class="line"><span class="comment">//引入svg需要用到插件</span></span><br><span class="line">import <span class="punctuation">&#123;</span> createSvgIconsPlugin <span class="punctuation">&#125;</span> from &#x27;vite-plugin-svg-icons&#x27;</span><br><span class="line"><span class="comment">//mock插件提供方法</span></span><br><span class="line">import <span class="punctuation">&#123;</span> viteMockServe <span class="punctuation">&#125;</span> from &#x27;vite-plugin-mock&#x27;</span><br><span class="line">export default defineConfig((<span class="punctuation">&#123;</span> command<span class="punctuation">,</span> mode <span class="punctuation">&#125;</span>) =&gt; <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">//获取各种环境下的对应的变量</span></span><br><span class="line">  let env = loadEnv(mode<span class="punctuation">,</span> process.cwd());</span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">	<span class="comment">// base: &quot;./&quot;, // 部署带前缀，如：http://localhost/admin/#/</span></span><br><span class="line">	base<span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span>	<span class="comment">// 默认不带前缀，如：http://localhost/#/</span></span><br><span class="line">    publicPath<span class="punctuation">:</span> &#x27;https<span class="punctuation">:</span><span class="comment">//gitee.com/jch1011/guiguzhenxuan&#x27;,</span></span><br><span class="line">    plugins<span class="punctuation">:</span> <span class="punctuation">[</span>vue()<span class="punctuation">,</span></span><br><span class="line">    createSvgIconsPlugin(<span class="punctuation">&#123;</span></span><br><span class="line">      iconDirs<span class="punctuation">:</span> <span class="punctuation">[</span>path.resolve(process.cwd()<span class="punctuation">,</span> &#x27;src/assets/icons&#x27;)<span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">      symbolId<span class="punctuation">:</span> &#x27;icon-<span class="punctuation">[</span>dir<span class="punctuation">]</span>-<span class="punctuation">[</span>name<span class="punctuation">]</span>&#x27;<span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span>)<span class="punctuation">,</span></span><br><span class="line">    viteMockServe(<span class="punctuation">&#123;</span></span><br><span class="line">      localEnabled<span class="punctuation">:</span> command === &#x27;serve&#x27;<span class="punctuation">,</span><span class="comment">//保证开发阶段可以使用mock接口</span></span><br><span class="line">    <span class="punctuation">&#125;</span>)</span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">    resolve<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      alias<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;@&quot;</span><span class="punctuation">:</span> path.resolve(__dirname<span class="punctuation">,</span> <span class="string">&quot;./src&quot;</span>) <span class="comment">// 相对路径别名配置，使用 @ 代替 src</span></span><br><span class="line">      <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="comment">//scss全局变量一个配置</span></span><br><span class="line">    css<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      preprocessorOptions<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        scss<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">          javascriptEnabled<span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">          additionalData<span class="punctuation">:</span> &#x27;@import <span class="string">&quot;./src/styles/variable.scss&quot;</span>;&#x27;<span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="comment">//代理跨域</span></span><br><span class="line">    server<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">      proxy<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="punctuation">[</span>env.VITE_APP_BASE_API<span class="punctuation">]</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="comment">//获取数据的服务器地址设置</span></span><br><span class="line">          target<span class="punctuation">:</span> env.VITE_SERVE<span class="punctuation">,</span></span><br><span class="line">          <span class="comment">//需要代理跨域</span></span><br><span class="line">          changeOrigin<span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">          <span class="comment">//路径重写</span></span><br><span class="line">          rewrite<span class="punctuation">:</span> (path) =&gt; path.replace(/^\/api/<span class="punctuation">,</span> &#x27;&#x27;)<span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">      <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span>)</span><br></pre></td></tr></table></figure>
<h2 id="3-1-集成element-plus"><a href="#3-1-集成element-plus" class="headerlink" title="3.1 集成element-plus"></a>3.1 集成element-plus</h2><p>官网地址:<a target="_blank" rel="noopener" href="https://element-plus.gitee.io/zh-CN/">https://element-plus.gitee.io/zh-CN/</a></p>
<pre><code>pnpm install element-plus @element-plus/icons-vue
</code></pre><p><strong>入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文</strong></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">ElementPlus</span> <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;element-plus/dist/index.css&#x27;</span></span><br><span class="line"><span class="comment">//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)</span></span><br><span class="line"><span class="keyword">import</span> zhCn <span class="keyword">from</span> <span class="string">&#x27;element-plus/dist/locale/zh-cn.mjs&#x27;</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title class_">ElementPlus</span>, &#123;</span><br><span class="line">    <span class="attr">locale</span>: zhCn</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>Element Plus全局组件类型声明</strong></p>
<pre><code>// tsconfig.json
&#123;
  &quot;compilerOptions&quot;: &#123;
    // ...
    &quot;types&quot;: [&quot;element-plus/global&quot;]
  &#125;
&#125;
</code></pre><p>配置完毕可以测试element-plus组件与图标的使用.</p>
<h2 id="3-2-src别名的配置"><a href="#3-2-src别名的配置" class="headerlink" title="3.2 src别名的配置"></a>3.2 src别名的配置</h2><p>在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vite.config.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;defineConfig&#125; <span class="keyword">from</span> <span class="string">&#x27;vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&#x27;@vitejs/plugin-vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> path <span class="keyword">from</span> <span class="string">&#x27;path&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">    <span class="attr">plugins</span>: [<span class="title function_">vue</span>()],</span><br><span class="line">    <span class="attr">resolve</span>: &#123;</span><br><span class="line">        <span class="attr">alias</span>: &#123;</span><br><span class="line">            <span class="string">&quot;@&quot;</span>: path.<span class="title function_">resolve</span>(<span class="string">&quot;./src&quot;</span>) <span class="comment">// 相对路径别名配置，使用 @ 代替 src</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>TypeScript 编译配置</strong></p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// tsconfig.json</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;compilerOptions&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;baseUrl&quot;</span>: <span class="string">&quot;./&quot;</span>, <span class="comment">// 解析非相对模块的基地址，默认是当前目录</span></span><br><span class="line">    <span class="string">&quot;paths&quot;</span>: &#123; <span class="comment">//路径映射，相对于baseUrl</span></span><br><span class="line">      <span class="string">&quot;@/*&quot;</span>: [<span class="string">&quot;src/*&quot;</span>] </span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="3-3-setup配置name属性"><a href="#3-3-setup配置name属性" class="headerlink" title="3.3 setup配置name属性"></a>3.3 setup配置name属性</h2><p>安装插件:</p>
<pre><code>pnpm install vite-plugin-vue-setup-extend -D
</code></pre><p>集成插件:</p>
<p>在vite.config.ts文件引入vite-plugin-vue-setup-extend</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vite.config.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&#x27;vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&#x27;@vitejs/plugin-vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> vueSetupExtend <span class="keyword">from</span> <span class="string">&#x27;vite-plugin-vue-setup-extend&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">  <span class="attr">plugins</span>: [<span class="title function_">vue</span>(), <span class="title function_">vueSetupExtend</span>()]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>.vue(SFC)单文件组件添加name属性</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup lang=&quot;ts&quot; name=&quot;userInfo&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;style lang=&quot;less&quot; scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="3-4-环境变量的配置"><a href="#3-4-环境变量的配置" class="headerlink" title="3.4 环境变量的配置"></a>3.4 环境变量的配置</h2><p><strong>项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。</strong></p>
<p>开发环境（development）<br>顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。</p>
<p>测试环境（testing）<br>测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试</p>
<p>生产环境（production）<br>生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)</p>
<p>注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！</p>
<p>项目根目录分别添加 开发、生产和测试环境的文件!</p>
<pre><code>.env.development
.env.production
.env.test
</code></pre><p>文件内容</p>
<pre><code># 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = &#39;development&#39;
VITE_APP_TITLE = &#39;运营平台&#39;
VITE_APP_BASE_API = &#39;/dev-api&#39;



NODE_ENV = &#39;production&#39;
VITE_APP_TITLE = &#39;运营平台&#39;
VITE_APP_BASE_API = &#39;/prod-api&#39;



# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = &#39;test&#39;
VITE_APP_TITLE = &#39;运营平台&#39;
VITE_APP_BASE_API = &#39;/test-api&#39;
</code></pre><p>配置运行命令：package.json</p>
<pre><code> &quot;scripts&quot;: &#123;
    &quot;dev&quot;: &quot;vite --open&quot;,
    &quot;build:test&quot;: &quot;vue-tsc &amp;&amp; vite build --mode test&quot;,
    &quot;build:pro&quot;: &quot;vue-tsc &amp;&amp; vite build --mode production&quot;,
    &quot;preview&quot;: &quot;vite preview&quot;
  &#125;,
</code></pre><p><strong>通过import.meta.env获取环境变量</strong></p>
<p>如果报类型错误，tsconfig.json 添加</p>
<pre><code>&#123;
    &quot;compilerOptions&quot;:&#123;
        &quot;types&quot;: [&quot;vite/client&quot;]
    &#125;
&#125;
</code></pre><h2 id="3-5-SVG图标配置"><a href="#3-5-SVG图标配置" class="headerlink" title="3.5 SVG图标配置"></a>3.5 SVG图标配置</h2><p>在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,</p>
<p>这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。</p>
<p><strong>安装SVG依赖插件</strong></p>
<pre><code>pnpm install vite-plugin-svg-icons -D
</code></pre><p><strong>在<code>vite.config.ts</code>中配置插件</strong></p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createSvgIconsPlugin &#125; <span class="keyword">from</span> <span class="string">&#x27;vite-plugin-svg-icons&#x27;</span></span><br><span class="line"><span class="keyword">import</span> path <span class="keyword">from</span> <span class="string">&#x27;path&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">      <span class="title function_">createSvgIconsPlugin</span>(&#123;</span><br><span class="line">        <span class="comment">// Specify the icon folder to be cached</span></span><br><span class="line">        <span class="attr">iconDirs</span>: [path.<span class="title function_">resolve</span>(process.<span class="title function_">cwd</span>(), <span class="string">&#x27;src/assets/icons&#x27;</span>)],</span><br><span class="line">        <span class="comment">// Specify symbolId format</span></span><br><span class="line">        <span class="attr">symbolId</span>: <span class="string">&#x27;icon-[dir]-[name]&#x27;</span>,</span><br><span class="line">      &#125;),</span><br><span class="line">    ],</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>main.ts入口文件导入</strong></p>
<pre><code>import &#39;virtual:svg-icons-register&#39;
</code></pre><p>3.4.1svg封装为全局组件</p>
<p>因为项目很多模块需要使用图标,因此把它封装为全局组件！！！</p>
<p><strong>在src/components目录下创建一个SvgIcon组件:代表如下</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;svg :style=&quot;&#123; width: width, height: height &#125;&quot;&gt;</span><br><span class="line">      &lt;use :xlink:href=&quot;prefix + name&quot; :fill=&quot;color&quot;&gt;&lt;/use&gt;</span><br><span class="line">    &lt;/svg&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup lang=&quot;ts&quot;&gt;</span><br><span class="line">defineProps(&#123;</span><br><span class="line">  //xlink:href属性值的前缀</span><br><span class="line">  prefix: &#123;</span><br><span class="line">    type: String,</span><br><span class="line">    default: &#x27;#icon-&#x27;</span><br><span class="line">  &#125;,</span><br><span class="line">  //svg矢量图的名字</span><br><span class="line">  name: String,</span><br><span class="line">  //svg图标的颜色</span><br><span class="line">  color: &#123;</span><br><span class="line">    type: String,</span><br><span class="line">    default: &quot;&quot;</span><br><span class="line">  &#125;,</span><br><span class="line">  //svg宽度</span><br><span class="line">  width: &#123;</span><br><span class="line">    type: String,</span><br><span class="line">    default: &#x27;16px&#x27;</span><br><span class="line">  &#125;,</span><br><span class="line">  //svg高度</span><br><span class="line">  height: &#123;</span><br><span class="line">    type: String,</span><br><span class="line">    default: &#x27;16px&#x27;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style scoped&gt;&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p>在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">SvgIcon</span> <span class="keyword">from</span> <span class="string">&#x27;./SvgIcon/index.vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123; <span class="title class_">App</span>, <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">components</span>: &#123; [<span class="attr">name</span>: <span class="built_in">string</span>]: <span class="title class_">Component</span> &#125; = &#123; <span class="title class_">SvgIcon</span> &#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">install</span>(<span class="params">app: App</span>) &#123;</span><br><span class="line">        <span class="title class_">Object</span>.<span class="title function_">keys</span>(components).<span class="title function_">forEach</span>(<span class="function">(<span class="params">key: <span class="built_in">string</span></span>) =&gt;</span> &#123;</span><br><span class="line">            app.<span class="title function_">component</span>(key, components[key]);</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> gloablComponent <span class="keyword">from</span> <span class="string">&#x27;./components/index&#x27;</span>;</span><br><span class="line">app.<span class="title function_">use</span>(gloablComponent);</span><br></pre></td></tr></table></figure>
<h2 id="3-6-集成sass"><a href="#3-6-集成sass" class="headerlink" title="3.6 集成sass"></a>3.6 集成sass</h2><p>我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候，项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法！！！需要加上lang=”scss”</p>
<pre><code>&lt;style scoped lang=&quot;scss&quot;&gt;&lt;/style&gt;
</code></pre><p>接下来我们为项目添加一些全局的样式</p>
<p>在src/styles目录下创建一个index.scss文件，当然项目中需要用到清除默认样式，因此在index.scss引入reset.scss</p>
<p>安装</p>
<pre><code>pnpm i reset.scss



@import reset.scss
</code></pre><p>在入口文件引入</p>
<pre><code>import &#39;@/styles&#39;
</code></pre><p>但是你会发现在src/styles/index.scss全局样式文件中没有办法使用<script type="math/tex">变量.因此需要给项目中引入全局变量</script>.</p>
<p>在style/variable.scss创建一个variable.scss文件！</p>
<p>在vite.config.ts文件配置如下:</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(<span class="function">(<span class="params">config</span>) =&gt;</span> &#123;</span><br><span class="line">	<span class="attr">css</span>: &#123;</span><br><span class="line">      <span class="attr">preprocessorOptions</span>: &#123;</span><br><span class="line">        <span class="attr">scss</span>: &#123;</span><br><span class="line">          <span class="attr">javascriptEnabled</span>: <span class="literal">true</span>,</span><br><span class="line">          <span class="attr">additionalData</span>: <span class="string">&#x27;@import &quot;./src/styles/variable.scss&quot;;&#x27;</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong><code>@import &quot;./src/styles/variable.less&quot;;</code>后面的<code>;</code>不要忘记，不然会报错</strong>!</p>
<p>配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了！！！</p>
<h2 id="3-7-mock数据"><a href="#3-7-mock数据" class="headerlink" title="3.7 mock数据"></a>3.7 mock数据</h2><p><strong>参考链接 ：<a target="_blank" rel="noopener" href="https://blog.csdn.net/lhkuxia/article/details/125000115">https://blog.csdn.net/lhkuxia/article/details/125000115</a></strong></p>
<p>安装依赖:<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/vite-plugin-mock">https://www.npmjs.com/package/vite-plugin-mock</a></p>
<pre><code>pnpm install -D vite-plugin-mock mockjs
</code></pre><p>在 vite.config.ts 配置文件启用插件。</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">UserConfigExport</span>, <span class="title class_">ConfigEnv</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; viteMockServe &#125; <span class="keyword">from</span> <span class="string">&#x27;vite-plugin-mock&#x27;</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&#x27;@vitejs/plugin-vue&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> (&#123; command &#125;)=&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">      <span class="title function_">vue</span>(),</span><br><span class="line">      <span class="title function_">viteMockServe</span>(&#123;</span><br><span class="line">        <span class="attr">localEnabled</span>: command === <span class="string">&#x27;serve&#x27;</span>,</span><br><span class="line">      &#125;),</span><br><span class="line">    ],</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在根目录创建mock文件夹:去创建我们需要mock数据与接口！！！</p>
<p>在mock文件夹内部创建一个user.ts文件</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用户信息数据</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createUserList</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> [</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">userId</span>: <span class="number">1</span>,</span><br><span class="line">            <span class="attr">avatar</span>:</span><br><span class="line">                <span class="string">&#x27;https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif&#x27;</span>,</span><br><span class="line">            <span class="attr">username</span>: <span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">            <span class="attr">password</span>: <span class="string">&#x27;111111&#x27;</span>,</span><br><span class="line">            <span class="attr">desc</span>: <span class="string">&#x27;平台管理员&#x27;</span>,</span><br><span class="line">            <span class="attr">roles</span>: [<span class="string">&#x27;平台管理员&#x27;</span>],</span><br><span class="line">            <span class="attr">buttons</span>: [<span class="string">&#x27;cuser.detail&#x27;</span>],</span><br><span class="line">            <span class="attr">routes</span>: [<span class="string">&#x27;home&#x27;</span>],</span><br><span class="line">            <span class="attr">token</span>: <span class="string">&#x27;Admin Token&#x27;</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">userId</span>: <span class="number">2</span>,</span><br><span class="line">            <span class="attr">avatar</span>:</span><br><span class="line">                <span class="string">&#x27;https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif&#x27;</span>,</span><br><span class="line">            <span class="attr">username</span>: <span class="string">&#x27;system&#x27;</span>,</span><br><span class="line">            <span class="attr">password</span>: <span class="string">&#x27;111111&#x27;</span>,</span><br><span class="line">            <span class="attr">desc</span>: <span class="string">&#x27;系统管理员&#x27;</span>,</span><br><span class="line">            <span class="attr">roles</span>: [<span class="string">&#x27;系统管理员&#x27;</span>],</span><br><span class="line">            <span class="attr">buttons</span>: [<span class="string">&#x27;cuser.detail&#x27;</span>, <span class="string">&#x27;cuser.user&#x27;</span>],</span><br><span class="line">            <span class="attr">routes</span>: [<span class="string">&#x27;home&#x27;</span>],</span><br><span class="line">            <span class="attr">token</span>: <span class="string">&#x27;System Token&#x27;</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> [</span><br><span class="line">    <span class="comment">// 用户登录接口</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">url</span>: <span class="string">&#x27;/api/user/login&#x27;</span>,<span class="comment">//请求地址</span></span><br><span class="line">        <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,<span class="comment">//请求方式</span></span><br><span class="line">        <span class="attr">response</span>: <span class="function">(<span class="params">&#123; body &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//获取请求体携带过来的用户名与密码</span></span><br><span class="line">            <span class="keyword">const</span> &#123; username, password &#125; = body;</span><br><span class="line">            <span class="comment">//调用获取用户信息函数,用于判断是否有此用户</span></span><br><span class="line">            <span class="keyword">const</span> checkUser = <span class="title function_">createUserList</span>().<span class="title function_">find</span>(</span><br><span class="line">                <span class="function">(<span class="params">item</span>) =&gt;</span> item.<span class="property">username</span> === username &amp;&amp; item.<span class="property">password</span> === password,</span><br><span class="line">            )</span><br><span class="line">            <span class="comment">//没有用户返回失败信息</span></span><br><span class="line">            <span class="keyword">if</span> (!checkUser) &#123;</span><br><span class="line">                <span class="keyword">return</span> &#123; <span class="attr">code</span>: <span class="number">201</span>, <span class="attr">data</span>: &#123; <span class="attr">message</span>: <span class="string">&#x27;账号或者密码不正确&#x27;</span> &#125; &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">//如果有返回成功信息</span></span><br><span class="line">            <span class="keyword">const</span> &#123; token &#125; = checkUser</span><br><span class="line">            <span class="keyword">return</span> &#123; <span class="attr">code</span>: <span class="number">200</span>, <span class="attr">data</span>: &#123; token &#125; &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 获取用户信息</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">url</span>: <span class="string">&#x27;/api/user/info&#x27;</span>,</span><br><span class="line">        <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">        <span class="attr">response</span>: <span class="function">(<span class="params">request</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">//获取请求头携带token</span></span><br><span class="line">            <span class="keyword">const</span> token = request.<span class="property">headers</span>.<span class="property">token</span>;</span><br><span class="line">            <span class="comment">//查看用户信息是否包含有次token用户</span></span><br><span class="line">            <span class="keyword">const</span> checkUser = <span class="title function_">createUserList</span>().<span class="title function_">find</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> item.<span class="property">token</span> === token)</span><br><span class="line">            <span class="comment">//没有返回失败的信息</span></span><br><span class="line">            <span class="keyword">if</span> (!checkUser) &#123;</span><br><span class="line">                <span class="keyword">return</span> &#123; <span class="attr">code</span>: <span class="number">201</span>, <span class="attr">data</span>: &#123; <span class="attr">message</span>: <span class="string">&#x27;获取用户信息失败&#x27;</span> &#125; &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">//如果有返回成功信息</span></span><br><span class="line">            <span class="keyword">return</span> &#123; <span class="attr">code</span>: <span class="number">200</span>, <span class="attr">data</span>: &#123;checkUser&#125; &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p><strong>安装axios</strong></p>
<pre><code>pnpm install axios
</code></pre><p>最后通过axios测试接口！！！</p>
<h2 id="3-8-axios二次封装"><a href="#3-8-axios二次封装" class="headerlink" title="3.8 axios二次封装"></a>3.8 axios二次封装</h2><p>在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候</p>
<p>我们经常会把axios进行二次封装。</p>
<p>目的:</p>
<p>1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)</p>
<p>2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)</p>
<p>在根目录下创建utils/request.ts</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;axios&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">ElMessage</span> &#125; <span class="keyword">from</span> <span class="string">&quot;element-plus&quot;</span>;</span><br><span class="line"><span class="comment">//创建axios实例</span></span><br><span class="line"><span class="keyword">let</span> request = axios.<span class="title function_">create</span>(&#123;</span><br><span class="line">    <span class="attr">baseURL</span>: <span class="keyword">import</span>.<span class="property">meta</span>.<span class="property">env</span>.<span class="property">VITE_APP_BASE_API</span>,</span><br><span class="line">    <span class="attr">timeout</span>: <span class="number">5000</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//请求拦截器</span></span><br><span class="line">request.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//响应拦截器</span></span><br><span class="line">request.<span class="property">interceptors</span>.<span class="property">response</span>.<span class="title function_">use</span>(<span class="function">(<span class="params">response</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> response.<span class="property">data</span>;</span><br><span class="line">&#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//处理网络错误</span></span><br><span class="line">    <span class="keyword">let</span> msg = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="keyword">let</span> status = error.<span class="property">response</span>.<span class="property">status</span>;</span><br><span class="line">    <span class="keyword">switch</span> (status) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">401</span>:</span><br><span class="line">            msg = <span class="string">&quot;token过期&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">403</span>:</span><br><span class="line">            msg = <span class="string">&#x27;无权访问&#x27;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">404</span>:</span><br><span class="line">            msg = <span class="string">&quot;请求地址错误&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">500</span>:</span><br><span class="line">            msg = <span class="string">&quot;服务器出现问题&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            msg = <span class="string">&quot;无网络&quot;</span>;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title class_">ElMessage</span>(&#123;</span><br><span class="line">        <span class="attr">type</span>: <span class="string">&#x27;error&#x27;</span>,</span><br><span class="line">        <span class="attr">message</span>: msg</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> request;</span><br></pre></td></tr></table></figure>
<h2 id="3-9-API接口统一管理"><a href="#3-9-API接口统一管理" class="headerlink" title="3.9 API接口统一管理"></a>3.9 API接口统一管理</h2><p>在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口；</p>
<p>比如:下面方式</p>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//统一管理咱们项目用户相关的接口</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">&#x27;@/utils/request&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">type</span> &#123;</span><br><span class="line"> loginFormData,</span><br><span class="line"> loginResponseData,</span><br><span class="line"> userInfoReponseData,</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;./type&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//项目用户相关的请求地址</span></span><br><span class="line"><span class="keyword">enum</span> <span class="variable constant_">API</span> &#123;</span><br><span class="line"> <span class="variable constant_">LOGIN_URL</span> = <span class="string">&#x27;/admin/acl/index/login&#x27;</span>,</span><br><span class="line"> <span class="variable constant_">USERINFO_URL</span> = <span class="string">&#x27;/admin/acl/index/info&#x27;</span>,</span><br><span class="line"> <span class="variable constant_">LOGOUT_URL</span> = <span class="string">&#x27;/admin/acl/index/logout&#x27;</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//登录接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">reqLogin</span> = (<span class="params">data: loginFormData</span>) =&gt; request.<span class="property">post</span>&lt;<span class="built_in">any</span>, loginResponseData&gt;(<span class="variable constant_">API</span>.<span class="property">LOGIN_URL</span>, data)</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取用户信息</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">reqUserInfo</span> = (<span class="params"></span>) =&gt; request.<span class="property">get</span>&lt;<span class="built_in">any</span>, userInfoReponseData&gt;(<span class="variable constant_">API</span>.<span class="property">USERINFO_URL</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//退出登录</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">reqLogout</span> = (<span class="params"></span>) =&gt; request.<span class="property">post</span>&lt;<span class="built_in">any</span>, <span class="built_in">any</span>&gt;(<span class="variable constant_">API</span>.<span class="property">LOGOUT_URL</span>)</span><br></pre></td></tr></table></figure>
</article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/web/h5%E5%92%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%8A%B6%E6%80%81%E6%A0%8F%E9%80%82%E9%85%8D/"><img class="prev-cover" src= "" data-lazy-src="/images/uni-app.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">uni-app h5和小程序状态栏适配</div></div></a></div><div class="next-post pull-right"><a href="/blog/web/Pinia/"><img class="next-cover" src= "" data-lazy-src="/images/pinia.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Pinia 使用</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/blog/web/Pinia/" title="Pinia 使用"><img class="cover" src= "" data-lazy-src="/images/pinia.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">Pinia 使用</div></div></a></div><div><a href="/blog/web/h5和小程序状态栏适配/" title="uni-app h5和小程序状态栏适配"><img class="cover" src= "" data-lazy-src="/images/uni-app.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">uni-app h5和小程序状态栏适配</div></div></a></div><div><a href="/blog/web/Vue3全家桶/" title="Vue3 常用"><img class="cover" src= "" data-lazy-src="/images/vue.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">Vue3 常用</div></div></a></div><div><a href="/blog/utils/input 检验函数 vue3/" title="input 检验函数"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">input 检验函数</div></div></a></div><div><a href="/blog/utils/vue3 指令/" title="Vue3 指令"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">Vue3 指令</div></div></a></div><div><a href="/blog/utils/小程序base64转为本地文件（图片）/" title="小程序base64转为本地文件"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">小程序base64转为本地文件</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">一切解释权归本咸鱼所有</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E9%A1%B9%E7%9B%AE%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="toc-number">1.</span> <span class="toc-text">1.项目初始化</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE"><span class="toc-number">2.</span> <span class="toc-text">2.项目配置</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-eslint%E9%85%8D%E7%BD%AE"><span class="toc-number">2.1.</span> <span class="toc-text">2.1 eslint配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E5%AE%89%E8%A3%85eslint"><span class="toc-number">2.1.1.</span> <span class="toc-text">1.1 安装eslint</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E7%94%9F%E6%88%90%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6-eslint-cjs"><span class="toc-number">2.1.2.</span> <span class="toc-text">1.2 生成配置文件:.eslint.cjs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-%E6%9B%BF%E6%8D%A2%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">2.1.3.</span> <span class="toc-text">1.3 替换配置文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-eslintignore%E5%BF%BD%E7%95%A5%E6%96%87%E4%BB%B6"><span class="toc-number">2.1.4.</span> <span class="toc-text">1.4 eslintignore忽略文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-5-%E6%96%B0%E5%A2%9E%E8%BF%90%E8%A1%8C%E8%84%9A%E6%9C%AC"><span class="toc-number">2.1.5.</span> <span class="toc-text">1.5 新增运行脚本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-%E9%85%8D%E7%BD%AEprettier"><span class="toc-number">2.2.</span> <span class="toc-text">2.2 配置prettier</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96%E5%8C%85"><span class="toc-number">2.2.1.</span> <span class="toc-text">1.1安装依赖包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-prettierrc-json%E6%B7%BB%E5%8A%A0%E8%A7%84%E5%88%99"><span class="toc-number">2.2.2.</span> <span class="toc-text">1.2.prettierrc.json添加规则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-prettierignore%E5%BF%BD%E7%95%A5%E6%96%87%E4%BB%B6"><span class="toc-number">2.2.3.</span> <span class="toc-text">1.3.prettierignore忽略文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-%E9%85%8D%E7%BD%AEstylelint"><span class="toc-number">2.3.</span> <span class="toc-text">2.3 配置stylelint</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96"><span class="toc-number">2.3.1.</span> <span class="toc-text">1.1 安装依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-stylelintrc-cjs%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">2.3.2.</span> <span class="toc-text">1.2 .stylelintrc.cjs配置文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-stylelintignore%E5%BF%BD%E7%95%A5%E6%96%87%E4%BB%B6"><span class="toc-number">2.3.3.</span> <span class="toc-text">1.3 .stylelintignore忽略文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-%E6%B7%BB%E5%8A%A0%E8%BF%90%E8%A1%8C%E8%84%9A%E6%9C%AC"><span class="toc-number">2.3.4.</span> <span class="toc-text">1.4 添加运行脚本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-4-%E9%85%8D%E7%BD%AEhusky"><span class="toc-number">2.4.</span> <span class="toc-text">2.4 配置husky</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E5%88%9B%E5%BB%BAgit%E4%BB%93%E5%BA%93"><span class="toc-number">2.4.1.</span> <span class="toc-text">1.1 创建git仓库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E5%AE%89%E8%A3%85husky"><span class="toc-number">2.4.2.</span> <span class="toc-text">1.2 安装husky</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-%E7%94%9F%E6%88%90%E9%85%8D%E7%BD%AE"><span class="toc-number">2.4.3.</span> <span class="toc-text">1.3 生成配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-5-%E9%85%8D%E7%BD%AEcommitlint"><span class="toc-number">2.5.</span> <span class="toc-text">2.5 配置commitlint</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-%E5%AE%89%E8%A3%85"><span class="toc-number">2.5.1.</span> <span class="toc-text">1.1 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-%E9%85%8D%E7%BD%AE"><span class="toc-number">2.5.2.</span> <span class="toc-text">1.2 配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-%E6%B7%BB%E5%8A%A0scripts"><span class="toc-number">2.5.3.</span> <span class="toc-text">1.3 添加scripts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-4-%E9%85%8D%E7%BD%AEhusky"><span class="toc-number">2.5.4.</span> <span class="toc-text">1.4 配置husky</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-6-%E5%BC%BA%E5%88%B6%E4%BD%BF%E7%94%A8pnpm"><span class="toc-number">2.6.</span> <span class="toc-text">2.6 强制使用pnpm</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E9%A1%B9%E7%9B%AE%E9%9B%86%E6%88%90"><span class="toc-number">3.</span> <span class="toc-text">3.项目集成</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-0-%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%A4%BA%E4%BE%8B"><span class="toc-number">3.1.</span> <span class="toc-text">3.0 配置文件示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-%E9%9B%86%E6%88%90element-plus"><span class="toc-number">3.2.</span> <span class="toc-text">3.1 集成element-plus</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-src%E5%88%AB%E5%90%8D%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">3.3.</span> <span class="toc-text">3.2 src别名的配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-3-setup%E9%85%8D%E7%BD%AEname%E5%B1%9E%E6%80%A7"><span class="toc-number">3.4.</span> <span class="toc-text">3.3 setup配置name属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-4-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-number">3.5.</span> <span class="toc-text">3.4 环境变量的配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-5-SVG%E5%9B%BE%E6%A0%87%E9%85%8D%E7%BD%AE"><span class="toc-number">3.6.</span> <span class="toc-text">3.5 SVG图标配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-6-%E9%9B%86%E6%88%90sass"><span class="toc-number">3.7.</span> <span class="toc-text">3.6 集成sass</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-7-mock%E6%95%B0%E6%8D%AE"><span class="toc-number">3.8.</span> <span class="toc-text">3.7 mock数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-8-axios%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85"><span class="toc-number">3.9.</span> <span class="toc-text">3.8 axios二次封装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-9-API%E6%8E%A5%E5%8F%A3%E7%BB%9F%E4%B8%80%E7%AE%A1%E7%90%86"><span class="toc-number">3.10.</span> <span class="toc-text">3.9 API接口统一管理</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/java/01%20Spring%20Security%20&amp;%20oauth2/" title="Spring Security &amp; Oauth2"><img src= "" data-lazy-src="/images/spring-security.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Spring Security &amp; Oauth2"/></a><div class="content"><a class="title" href="/blog/java/01%20Spring%20Security%20&amp;%20oauth2/" title="Spring Security &amp; Oauth2">Spring Security &amp; Oauth2</a><time datetime="2024-04-25T07:24:45.000Z" title="发表于 2024-04-25 15:24:45">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/02%20JWT%E5%B7%A5%E5%85%B7%E7%B1%BB/" title="JWT工具类"><img src= "" data-lazy-src="/images/jwt.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JWT工具类"/></a><div class="content"><a class="title" href="/blog/java/02%20JWT%E5%B7%A5%E5%85%B7%E7%B1%BB/" title="JWT工具类">JWT工具类</a><time datetime="2024-04-25T07:24:45.000Z" title="发表于 2024-04-25 15:24:45">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/00%20Security%20%E9%9B%86%E6%88%90%E7%A4%BA%E4%BE%8B/" title="SpringSecurity 集成示例"><img src= "" data-lazy-src="/images/spring-security.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SpringSecurity 集成示例"/></a><div class="content"><a class="title" href="/blog/java/00%20Security%20%E9%9B%86%E6%88%90%E7%A4%BA%E4%BE%8B/" title="SpringSecurity 集成示例">SpringSecurity 集成示例</a><time datetime="2024-04-25T07:24:43.000Z" title="发表于 2024-04-25 15:24:43">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/101%20Mybatis-plus%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="MybatisPlus 快速集成"><img src= "" data-lazy-src="/images/mybatis-plus.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MybatisPlus 快速集成"/></a><div class="content"><a class="title" href="/blog/java/101%20Mybatis-plus%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="MybatisPlus 快速集成">MybatisPlus 快速集成</a><time datetime="2024-04-21T07:39:43.000Z" title="发表于 2024-04-21 15:39:43">2024-04-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/10%20Mybatis%20%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="Mybatis 快速集成"><img src= "" data-lazy-src="/images/mybaits.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Mybatis 快速集成"/></a><div class="content"><a class="title" href="/blog/java/10%20Mybatis%20%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="Mybatis 快速集成">Mybatis 快速集成</a><time datetime="2024-04-21T07:24:43.000Z" title="发表于 2024-04-21 15:24:43">2024-04-21</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By mowei</div><div class="footer_custom_text">海内存知已，天涯若比邻</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
  if (window.mermaidJsLoad) mermaid.init()
  else {
    getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
      window.mermaidJsLoad = true
      mermaid.initialize({
        theme: 'default',
      })
      true && mermaid.init()
    })
  }
}</script></div><div class="aplayer no-destroy" data-id="9385310356" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="/live2d_models/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2d_models/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2d_models/assets/wanko.model.json"},"display":{"position":"left","width":100,"height":150,"hOffset":-10,"vOffset":40},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body></html>